<template>
	<view class="headBarAPP">
		<text class="title">{{title}}</text>
		<!-- 左 箭头返回 -->
		<text class="iconfont left" @tap="handlToBack()" v-if="showButtonBack">&#xe681;</text>
		<!-- 右 省略 more -->
		<text class="iconfont right" @tap="handlToHome()" v-if='showButtonMore'>&#xe700;</text>
	</view>
</template>

<script>
	export default {
		name: "headBarApp",
		data() {
			return {};
		},
		props: {
			title: {
				type: String,
				default: '页面标题'
			},
			showButtonBack: {
				type: Boolean,
				default: true
			},
			showButtonMore: {
				type: Boolean,
				default: true
			},
		},
		onShow() {
			console.log(mode);
		},
		methods: {
			handlToBack() {
				uni.navigateBack();
			},
			handlToHome() {
				uni.switchTab({
					url: '/pages/home/home'
				});
			},
		}
	}
</script>

<style lang="scss">
	.headBarAPP {
		width: 100%;
		height: 75rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.title {
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		font-size: $font-size-l-m;
	}

	.left {
		position: absolute;
		left: 20rpx;
		font-size: $icon-size-m-s;
	}

	.right {
		position: absolute;
		right: 20rpx;
		font-size: $icon-size-m-s;
	}
</style>